<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style//css/reset.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style//css/transaction/add_form.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/patrol/project_device_alert.css">
</script>
<!-- 样式 -->
<style scoped>
   .layui-form-radio{
       margin: 0px;
       line-height: 21px;
   }
   .layui-form-item .layui-form-checkbox{
       margin-top: 0px;
       border:1px solid #eee;
   }
   .layui-form-checkbox i{
       border: 0px;
   }
   .FalgeTitle{
       margin-left: 40px;
   }
</style>
<div>
    <div class="layui-form " style="padding: 50px;" lay-filter="layuiadmin-form" id="layuiadmin-form">
        <div class="layui-table-box" style="padding: 50px;">
            <div class="layui-table-title">
                创建启用/停用工单信息
            </div>
            <ul class="layui-row ">
                <li class="layui-col-md4 layui-col-sm4">
                    <div class="
                    form layui-form-item">
                        <label class=" 
                    layui-label-inlineblock    layui-form-label"><span
                                style="font-size: 18px;color: red;position: relative;display: inline-block;line-height: 20px;vertical-align: middle;top:3px;">*</span>工单名称：</label>
                        <div class="layui-input-block">
                            <input type="text" name="tcReqName" autocomplete="off" class="layui-input"
                                lay-verify="required">
                        </div>
                    </div>

                    <div class="
                    form layui-form-item">
                        <label class=" 
                    layui-label-inlineblock    layui-form-label">OA申请编号：</label>
                        <div class="layui-input-block">
                        </div>

                    </div>
                    <div class="
                    form layui-form-item">
                        <label class=" 
                    layui-label-inlineblock    layui-form-label">
                            申请日期：<span id="time"></span></label>
                        <div class="layui-input-block">
                        </div>

                    </div>

                    <div class="
                    form layui-form-item">
                        <label class=" 
                    layui-label-inlineblock    layui-form-label">
                            <!-- <span
                                style="font-size: 18px;color: red;position: relative;display: inline-block;line-height: 20px;vertical-align: middle;top:3px;">*</span> -->
                            是否计划外</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="tcReqIsunpln">
                        </div>
                    </div>
                </li>
                <li class="layui-col-md4 layui-col-sm4">
                    <div class="
                    form layui-form-item">
                        <label style="padding-left:8px;">工单编号：</label>

                        <div class="layui-input-block" id="bianhao" style='display: flex;align-items: center;'>

                        </div>

                    </div>

                    <div class="form layui-form-item">
                        <label class=" layui-label-inlineblock   layui-form-label">
                            <!-- <span
                                style="font-size: 18px;color: red;position: relative;display: inline-block;line-height: 20px;vertical-align: middle;top:3px;">*</span> -->
                            启用/停用时间：</label>
                        <div class="layui-input-block" style='display: flex;align-items: center;'>
                            <input type="text" placeholder="请选择启用/停用时间" class="layui-input" id="test1"
                                autocomplete="off">
                        </div>
                    </div>
                    <div class="
                    form layui-form-item">
                        <label class=" 
                    layui-label-inlineblock    layui-form-label">
                            <span
                                style="font-size: 18px;color: red;position: relative;display: inline-block;line-height: 20px;vertical-align: middle;top:3px;">*</span>设备所属公司：</label>
                        <div class="layui-input-block">
                            <select id="azp02" name="azp02" placeholder="请输入原所属公司" lay-search lay-verify="required" lay-filter="azp02">

                            </select>
                            <!-- 隐藏 -->
                            <input type="text" placeholder="" class="layui-input" id="element" autocomplete="off"
                                style="display:none;">
                        </div>
                    </div>
                </li>
                <li class="layui-col-md4 layui-col-sm4">
                    <div class="form layui-form-item">
                        <label class=" layui-label-inlineblock  layui-form-label"
                            style="padding-left:8px;">工单状态：</label>
                        <div class="layui-input-block" style='display: flex;align-items: center;'>
                            未提交
                        </div>
                    </div>
                    <div class="
                    form layui-form-item">
                        <label class=" 
                    layui-label-inlineblock    layui-form-label">
                            申请人：</label>
                        <div id="gen01" class="layui-input-block">
                        </div>
                    </div>
                    <div class="form layui-form-item">
                        <label class="layui-label-inlineblock layui-form-label">
                            <span
                                style="font-size: 18px;color: red;position: relative;display: inline-block;line-height: 20px;vertical-align: middle;top:3px;">*</span>工单类型：</label>
                        <div class="layui-input-block">
                               <input type="radio" name="tcDevIsDisable" value="1" title="停用">
                               <input type="radio" name="tcDevIsDisable" value="0" title="启用">
                        </div>
                    </div>
                </li>
            </ul>
            <div>
            </div>
            <div class="layui-table-box">
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">
                        <!-- <span
                            style="font-size: 18px;color: red;position: relative;display: inline-block;line-height: 20px;vertical-align: middle;top:3px;">*</span> -->

                        停用说明:</label>
                    <div class="layui-input-block">
                        <textarea name="fil21" placeholder="请输入 停用说明" class="layui-textarea"
                            ></textarea>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">
                        <!-- <span
                            style="font-size: 18px;color: red;position: relative;display: inline-block;line-height: 20px;vertical-align: middle;top:3px;">*</span> -->
                        备注：</label>
                    <div class="layui-input-block">
                        <textarea name="fil07" placeholder="请输入备注" class="layui-textarea"
                            ></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="title-btn layui-btn-containner">
            <button class="add layui-btn layui-btn-radius layui-btn-primary">
                <i class="add-icon layui-icon layui-icon-add-circle" style="font-size: 15px;"></i>
                <span class="btn-inner">添加设备</span>
            </button>
            <span class="FalgeTitle"><i style="color: red;">温馨提示</i>:保存状态停用说明与备注可不填</span>
        </div>
        <div class="layui-card-body"></div>
        <table class="layui-table" lay-size="sm" id="baseTable">
            <thead>    
                <tr>
                 <th>设备编号</th>
                 <th>操作</th>
                 <th>设备名称</th>
                 <th>设备类型</th>
                 <th>供应商</th>
                 <th>设备系列</th>
                 <th>设备型号</th>
                 <th>资产编号</th>
                 <th>所属公司</th>
                 <th>负责部门</th>
                 <th>负责位置</th>
                 <th>负责人</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div class="footer layui-btn-containner">
            <button class="commit layui-btn layui-btn-radius layui-btn-primary" lay-submit
                lay-filter="LAY-submit-tj">提交</button>
            <button class="hold layui-btn layui-btn-radius layui-btn-primary" lay-submit
                lay-filter="LAY-submit-bc">保存</button>
            <button class="cancel layui-btn layui-btn-radius layui-btn-primary" lay-filter="LAY-submit-qx">取消</button>
        </div>
    </div>
</div>
<!-- 巡检设备选择 -->
<script type="text/html" id="addDeviceTpl">
    <div class="leon-style-alert">
        <div class="layui-alert-box">
            <div class="layui-alert-title">
                <span class="layui-title-inner">停用设备选择</span>
                <span class="layui-title-screen">
                    <div class="screen-btn">
                        <form class="layui-form" action="">
                            <input type="search" name="keyWord" class="search-blank-inner searchInput"
                                placeholder="搜索" autocomplete="off"/>
                            <button type="button" lay-submit lay-filter="queryTableDeviceHeader"
                                class="search-blank-icon"></button>
                        </form>
                    </div>
                </span>
            </div>
            <div class="layui-content">
                <div class="con1 toggle-btn">
                    <span class="screen">
                        <i class="query-icon  layui-icon"></i>
                        <span class="query-inner">查询条件</span>
                    </span>
                    <i class="icon layui-icon layui-icon-down"></i>
                </div>
                <div class="con2 toggle-content">
                    <form action="" class="layui-form">

                        
                        <label for="">设备编号:</label>
                        <input type="text" name="fia01" />
                        <label for="">设备名称:</label>
                        <input type="text" name="fia02" />
                        <label for="">供应商:</label>
                        <input type="text" name="pmc01" />
                        <button type="button" lay-submit lay-filter="queryTableDevice"
                            class="query layui-btn layui-btn-radius layui-btn-primary">
                            <span class="search-icon"></span>
                            <span class="btn-inner">查询</span>
                        </button>
                    </form>
                </div>
                <table class="layui-table" id="table-device-alert"></table>
            </div>
            <div class="footer layui-btn-containner">
                <button class="btn1 layui-btn layui-btn-radius layui-btn-primary" lay-submit lay-filter="add">添加</button>
                <button class="btn2 layui-btn layui-btn-radius layui-btn-primary">取消</button>
            </div>
        </div>
    </div>
</script>

<script>
    var shuju = {

        tcDetailFia01: []
    }

    layui.use(['form', 'table', 'api', 'utill', 'laydate', 'jquery'], function () { //此段代码必不可少
        var table = layui.table,
            setter = layui.setter,
            laytpl = layui.laytpl,
            api = layui.api,
            utill = layui.utill,
            form = layui.form,
            admin = layui.admin,
            view = layui.view,
            element = layui.element,
            form = layui.form,
            $ = layui.jquery,
            laydate = layui.laydate;

        form.render(null, 'layuiadmin-form');
        $('[data-jump="transaction/cashForm"]').addClass('layui-this').attr('color', '#FFF');
        //执行一个laydate实例
        laydate.render({
            elem: '#test1' //指定元素
            , type: 'datetime'
            , format: 'yyyy-MM-dd HH:mm:ss' //可任意组合
        });

        let azp02 = $('#azp02').val();
        form.on('select(azp02)', function(data){
            if(data.value != ''){
                form.render('select')
                azp02 = data.value;
            }
        }); 

        form.on('submit(LAY-submit-bc)', function (data) {
             var field = data.field
             var value = $('input:radio[name="tcDevIsDisable"]:checked').val();
            if(value == null || value == ""){
               layer.msg("请选择一个工单类型");
               return false
            }
            if (field.tcReqIsunpln) {
                shuju.tcReqIsunpln = 1
            } else {
                shuju.tcReqIsunpln = 0
            }
            shuju.fil12 = $('#test1').val()
            shuju.fil01 = $('#bianhao').html()
            shuju.tcReqName = field.tcReqName
            shuju.filplant = field.azp02   
            shuju.tcReqIsunpln = field.tcReqIsunpln
            shuju.tcDevIsDisable = field.tcDevIsDisable
            if (field.tcDevIsDisable == 1) {
                shuju.fil04 = 'TY'
            } else {
                shuju.fil04 = 'QY'
            }
            shuju.fil08 = $('#gen01').html().split('-')[1]
            shuju.fil10 = utill.timestampToTime(new Date())
            shuju.fil21 = field.fil21
            shuju.fil07 = field.fil07
            for (let index = 0; index < shuju.tcDetailFia01.length; index++) {
                shuju.tcDetailFia01[index] = shuju.tcDetailFia01[index].fia01
            }
            bc(JSON.stringify(shuju))
        })



        form.on('submit(LAY-submit-tj)', function (data) {
            var field = data.field
            if (field.tcReqIsunpln) {
                shuju.tcReqIsunpln = 1
            } else {
                shuju.tcReqIsunpln = 0
            }
            shuju.tcDevIsDisable = field.tcDevIsDisable
            shuju.fil01 = $('#bianhao').html()
            shuju.tcReqName = field.tcReqName
            shuju.filplant = field.azp02
            shuju.fil12 = $('#test1').val()
            if (field.tcDevIsDisable == 1) {
                shuju.fil04 = 'TY'
            } else {
                shuju.fil04 = ' QY'
            }
            shuju.fil08 = $('#gen01').html().split('-')[1]
            shuju.fil10 = utill.timestampToTime(new Date())
            shuju.fil21 = field.fil21
            shuju.fil07 = field.fil07
            for (let index = 0; index < shuju.tcDetailFia01.length; index++) {
                shuju.tcDetailFia01[index] = shuju.tcDetailFia01[index].fia01

            }
            tj(JSON.stringify(shuju))

        })
        $('.layui-form').on('click', '.cancel', function () {
            location.hash = '/transaction/cashForm'
        })

        function bc(data1) {
            admin.req({
                url: api.host + api.preservationEquipmentTYOrBF,
                type: "post",
                data: data1,
                dataType: 'json',
                contentType: 'application/json',
                done: function (res) {
                    location.hash = '/transaction/cashForm'
                }
            });
        }


        function tj(data1) {
            admin.req({
                url: api.host + api.insertEquipmentTYOrBF,
                type: "post",
                data: data1,
                dataType: 'json',
                contentType: 'application/json',
                done: function (res) {
                    layer.msg(res.message);
                    location.hash = '/transaction/cashForm'
                }
            });
        }



        document.getElementById('time').innerHTML = utill.timestampToTime(new Date())

        admin.req({
            url: api.host + api.AzpSelectAllAzp,
            type: "POST",
            done: function (res) {


                var str = '<option value=""></option>'
                for (let index = 0; index < res.data.length; index++) {

                    str = str +
                        `<option value="${res.data[index].azp01}">${res.data[index].azp02}</option>`

                }
                $('#azp02').html(str)

                form.render(null, 'layuiadmin-form');
            }
        });

        admin.req({
            type: 'post',
            url: api.host + api.returnQYFil01,
            done: function (res) {
                $('#bianhao').html(res.data.str);
                $('#gen01').html(res.data.name[0].gen02 + "-" + res.data.name[0].gen01);
            }
        });






        $('#baseTable').on('click', '.table-delete', function () {
            var index = $(this).parents('div').parents('td').parents('tr').index()
            shuju.tcDetailFia01.splice(index, 1);
            $('#baseTable').find('> tbody tr').eq(index).remove();
        });


        $('.title-btn').on('click', '.add', function (e) {
            // console.log($('#azp02').val());
            if (!$('#azp02').val()) {
                layer.msg('请先选择设备所属公司');
                return false
            }
            // 判断
            var value = $('input:radio[name="tcDevIsDisable"]:checked').val();
            if(value == null || value == ""){
               layer.msg("请选择一个工单类型");
               return false
            }
            layer.open({
                type: 1,
                title: false,
                area: ['662px', '536px'],
                fixed: true,
                shadeClose: true,
                closeBtn: 0,
                content: $('#addDeviceTpl').html(),
                success: alertEvent.addDevice
            });
        })


        var alertEvent = {
            addDevice: function (layero, index) {
                table.render({
                    elem: '#table-device-alert',
                    id: "#table-device-alert",
                    skin: 'nob',
                    height: 300,
                    loading: true,
                    method: 'POST',
                    toolbar: '',
                    headers: { 'token': layui.sessionData(setter.tableName).token },
                    cols: [
                        [{
                            type: 'checkbox',
                            width: 20
                        },
                        {
                            field: 'fia01',
                            title: '设备编号'
                        },
                        {
                            field: 'fia02',
                            title: '设备名称'
                        },
                        {
                            field: 'fic02',
                            title: '设备类型'
                        },
                        {
                            field: 'pmc081',
                            title: '供应商'
                        },
                        {
                            field: 'tcSeriesName',
                            title: '设备系列'
                        },
                        {
                            field: 'fii02',
                            title: '设备型号'
                        }
                        ]
                    ],

                    url: api.host + api.FilFileDBSelectFiaFiles2_llp,
                    request: {
                        pageName: 'pageNum',
                        limitName: 'pageSize',
                    },
                    page: {
                        layout: ['prev', 'page', 'next', 'skip'],
                        limits: [10, 20, 30, 50],
                        theme: '#1E9FFF'
                    },
                    parseData: function (res) { //res 即为原始返回的数据
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.message, //解析提示文本
                            "count": res.data.total, //解析数据长度
                            "data": res.data //解析数据列表
                        };
                    },
                    contentType: 'application/json',
                    where: {
                        // fia01: "",
                        // fia02: "",
                        // fia09: "",
                        // keyWord: "",
                        tcDevIsDisable: $("input[type='radio']:checked").val(),
                        tcReqCoorig: $('#azp02').val()
                    }
                });
                $('.leon-style-alert .con1').click(function(){
                  $('.con2').toggle();
                }) 
                form.on('submit(queryTableDeviceHeader)', function (data) {
                    var allData = data.field;

                    table.reload('#table-device-alert', {
                        where: allData,
                    });
                    return false;
                })

                // 弹出层高查
                form.on('submit(queryTableDevice)', function (data) {
                    var allData = data.field;
                    table.reload('#table-device-alert', {
                        where: allData,
                    });
                    return false;
                })

                utill.keyup('.search-blank-inner', '.search-blank-icon');
                form.on('submit(add)', function (data) {
                    $('#azp02').attr('disabled','disabled');
                    var checkedArr = table.checkStatus('#table-device-alert').data;
                        checkedArr.forEach(function (item, index) {
                            item.tcDetailFil01 = $('#bianhao').html()
                            for (let index = 0; index < shuju.tcDetailFia01.length; index++) {
                                if (shuju.tcDetailFia01[index].fia01 == item.fia01) {
                                    layer.open({content:'请勿重复添加设备'})
                                    return
                                }
                            }
                            var TPL = `<tr>
                                      <td>${item.fia01}</td>
                                        <td>
                                            <div style='display:flex' > 
                                            <span  class="table-delete" ></span></div>
                                        </td>
                                      <td>${item.fia02}</td>
                                      <td>${item.fic02}</td>
                                      <td>${item.pmc081}</td>
                                      <td>${item.tcSeriesName}</td>
                                      <td>${item.fii02}</td>
                                      <td>${item.fia011}</td>
                                      <td>${item.azp02}</td>
                                      <td>${item.gem02}</td>
                                      <td>${item.tcFtyName}${item.tcFlrName}</td>
                                      <td>${item.gen02}</td>
                                    </tr>`;
                            $('#baseTable').find('> tbody').append(TPL);

                            shuju.tcDetailFia01.push(item)

                        })
                        form.render();
                        layer.closeAll()
                    return false;
                })
                $('.footer').on('click','.btn2',function(){
                    layer.closeAll()
                })
            }
        }



        // 下拉查询列表
        $('body').off('click', '.toggle-btn').on('click', '.toggle-btn', function () {
            if ($('.toggle-content').hasClass('toggle-content-on')) {
                $('.toggle-content').removeClass('toggle-content-on');
                $(this).find('.layui-icon-up').addClass('layui-icon-down').removeClass('layui-icon-up')
            } else {
                $('.toggle-content').addClass('toggle-content-on');
                $(this).find('.layui-icon-down').addClass('layui-icon-up').removeClass(
                    'layui-icon-down')
            }
        })


    });
</script>